<template>
  <a-card :bodyStyle="{ padding: '15px' }" :bordered="false">
    <a-row :gutter="24" style="margin-bottom: 15px">
      <a-col :span="8">
        <a-form-item
          label="专项经费名称"
          :label-col="{ style: { width: '100px' } }"
        >
          <a-input
            v-model:value="filterRule.name"
            placeholder="请输入专项经费名称"
        /></a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="专项经费类型"
          :label-col="{ style: { width: '100px' } }"
        >
          <MySelect
            title="请选择经费类型"
            style="width: 100%"
            :fieldNames="{ label: 'label', value: 'value' }"
            :selectData="typeSelect"
            v-model:value="filterRule.type"
          ></MySelect
        ></a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="经费申请分工会"
          :label-col="{ style: { width: '100px' } }"
          v-if="filterRule.type === 1"
        >
          <MySelect
            title="请选择经费申请分工会"
            style="width: 100%"
            :fieldNames="{ label: 'name', value: 'id' }"
            :selectData="unionOption"
            v-model:value="filterRule.baseUnion"
          ></MySelect>
        </a-form-item>
        <a-form-item
          label="经费申请协会"
          :label-col="{ style: { width: '100px' } }"
          v-if="filterRule.type === 2"
        >
          <MySelect
            title="请选择经费申请协会"
            style="width: 100%"
            :fieldNames="{ label: 'name', value: 'id' }"
            :selectData="associationOption"
            v-model:value="filterRule.association"
          ></MySelect>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item
          label="申请金额大于"
          :label-col="{ style: { width: '100px' } }"
        >
          <a-input-number
            v-model:value="filterRule.higherAmount"
            :controls="false"
            style="width: 100%"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="申请金额小于"
          :label-col="{ style: { width: '100px' } }"
        >
          <a-input-number
            v-model:value="filterRule.lowerAmount"
            :controls="false"
            style="width: 100%"
          />
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-button type="primary" style="margin-left: 100px">
          <template #icon><search-outlined /></template>
          搜索
        </a-button>
      </a-col>
    </a-row>
  </a-card>
  <MyTable
    :tableData="tableData"
    :columns="columns"
    :pagination="pagination"
    useNumber
  ></MyTable>
</template>

<script setup lang="ts">
import { ref, onMounted, h, reactive } from "vue";
import { Tag, PaginationProps } from "ant-design-vue";
import MyTable from "@/components/CommonDai/Table.vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import MySelect from "@/components/CommonDai/SelectSearch.vue";
import { getAssociationList, getUnionList } from "../../api";
onMounted(() => {
  getAssociationList({ page: 1, size: 50 }).then((res: any) => {
    associationOption.value = res.result.records;
  });
  getUnionList({ page: 1, size: 50 }).then((res: any) => {
    unionOption.value = res.result.records;
  });
});

const filterRule = reactive({
  name: "",
  type: undefined,
  higherAmount: undefined,
  lowerAmount: undefined,
  baseUnion: undefined,
  status: undefined,
  association:undefined
});
const unionOption = ref<any[]>([])
const associationOption = ref<any[]>([])
const typeSelect = [
  {
    value: 0,
    label: "工会专项经费",
  },
  {
    value: 1,
    label: "基层工会专项经费",
  },
  {
    value: 2,
    label: "协会专项经费",
  },
];
const tableData = ref([
  {
    id: "1",
    name: "扩大科研项目经费",
    type: "工会专项经费",
    amount: 88888,
    union: "经济管理学院工会",
    member: "是呆龙没错了",
    phone: "17859520236",
    time: "2023-11-15",
    status: 1,
  },
]);
const columns = ref([
  {
    title: "专项经费名称",
    dataIndex: "name",
    isShow: true,
    align: "center",
  },
  {
    title: "专项经费类型",
    dataIndex: "type",
    isShow: true,
    align: "center",
  },
  {
    title: "专项经费金额",
    dataIndex: "amount",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return h(Tag, { color: "orange" }, () => convertLimit(text));
    },
  },
  {
    title: "专项经费单位",
    dataIndex: "union",
    isShow: true,
    align: "center",
  },
  {
    title: "申请人",
    dataIndex: "member",
    isShow: true,
    align: "center",
  },
  {
    title: "申请人电话",
    dataIndex: "phone",
    isShow: true,
    align: "center",
  },
  {
    title: "剩余预算",
    dataIndex: "budget",
    isShow: true,
    align: "center",
    customRender: ({ text }: any) => {
      return text ? "" : h(Tag, { color: "blue" }, () => "7万元");
    },
  },
  // {
  //   title: "操作",
  //   dataIndex: "action",
  //   isShow: true,
  //   align: "center",
  //   customRender: ({ record }) => {
  //     return h(
  //       "a",
  //       {
  //         onClick: () => {
  //           visible.value = true;
  //           actionData.value = record;
  //         },
  //       },
  //       "分配预算"
  //     );
  //   },
  // },
]);
const pagination = ref<PaginationProps>({
  current: 1,
  pageSize: 10,
  onChange: (page: number, pageSize: number) => {
    pagination.value.current = page;
    pagination.value.pageSize = pageSize;
  },
});

const convertLimit = (arg: number) => {
  if (!arg) {
    return undefined;
  }
  if (arg.toString().length >= 13) {
    const volume = arg / 1000000000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万亿";
  } else if (arg.toString().length >= 9) {
    const volume = arg / 100000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "亿";
  } else if (arg.toString().length >= 5) {
    const volume = arg / 10000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万";
  } else {
    return arg;
  }
};
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
:deep(.ant-col) {
  width: auto;
}
:deep(.ant-form-item) {
  margin-bottom: 0;
}
</style>
